<template>
  <div style="height: 100%;">
    <dc-guide v-if="guideFlag"></dc-guide>
    <transition :name="transitionName">
      <keep-alive>
        <router-view class="child-view"></router-view>
      </keep-alive>
    </transition>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        transitionName: '',
        guideFlag: false
      };
    },
    activated () {
      let guideFlag = localStorage.getItem('guideFlag');
      this.guideFlag = !(guideFlag === 'false' || false);
    },
    watch: {
      '$route' (to, from) {
        this.transitionName = to.name === 'reports' ? 'translate' : 'translate2';
        /*setTimeout(() => {
          this.transitionName = '';
        }, 500);*/
      }
    },
    components: {
      'dc-guide': resolve => {
        //异步组件写法
        require(['./guide'], resolve);
      }
    }
  };
</script>
<style lang="scss" scoped>
  @import '../../assets/css/variable';

  .translate-enter, .translate2-leave-active {
    //opacity: 0.5;
    -webkit-transform: translate(0, 100%);
    transform: translate(0, 100%);
  }
  .translate-leave-active, .translate2-enter {
    //opacity: 0.5;
    -webkit-transform: translate(0,-100%);
    transform: translate(0,-100%);
  }
  .child-view{
    transition: all 0.5s linear;
    position: absolute;
    width: 100%;
    height:100%;
  }

</style>
